<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>相亲信息管理</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">相亲信息管理</div>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="xinxichaxun.html">信息</a>
          <dl class="layui-nav-child">
            <dd><a href="ceshi.html">查询信息</a></dd>
            <dd><a href="xinxichaxun.html">用户信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="zhuyechaxun.html">公司信息</a>
          <dl class="layui-nav-child">
            <dd><a href="zhuyechaxun.html">公司信息</a></dd>
            <dd><a href="zhuyetianjia.html">添加信息</a></dd>
             <dd><a href="zhuyebianji.html">编辑公司信息</a></dd>
         </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="chaxuncity.html">城市</a>
          <dl class="layui-nav-child">
            <dd><a href="chaxuncity.html">城市信息</a></dd>
            <dd><a href="Addcity.html">添加城市</a></dd>   
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">婚恋顾问</a>
          <dl class="layui-nav-child">
            <dd><a href="guwen.html">顾问信息</a></dd>
             <dd><a href="guwen编辑.html">编辑顾问信息</a></dd>
              <dd><a href="guwen添加.html">添加顾问信息</a></dd>
         </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <table id="chaxunxinxi" lay-filter="test"></table>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © HongNiangNiang6.com - 底部固定区域
  </div>
</div>
<script src="../lib/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','table','layer'], function(){
 var element = layui.element;
 var table = layui.table;
 var layer = layui.layer;
 var $=layui.$;
  //查询信息
  table.render({
    elem: '#chaxunxinxi'
    ,height: 510
    ,toolbar: '#toolbar' //头部工具栏
    ,url: '../cxxx' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80,  fixed: 'left'}
      ,{field: 'name', title: '姓名', width:80}
      ,{field: 'sex', title: '性别', width:80}
      ,{field: 'birthday', title: '出生日期', width:150} 
      ,{field: 'age', title: '年龄', width: 80}
      ,{field: 'city', title: '城市', width: 80}
      ,{field: 'tupian', title: '图片', width: 80}
      ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
  });
  //监听行内工具栏事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	 
	  if(layEvent === 'detail'){ //查看
		  layer.msg('查看信息');
	    //do somehing
	  } else if(layEvent === 'del'){ //删除
	    layer.confirm('真的删除行么', function(index){
				$.ajax({
					url:"../xinxisc",
					type:"get",
					data:{
						id:data.id
				},
					success:function(res){
						if(res.code ==0){
							layer.msg("删除成功")
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						}else{
							layer.msg("删除失败")
						}
					}
				});
	    	
	      
	      layer.close(index);
	      //向服务端发送删除指令
	    });
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    layer.open({
        type: 2 //此处以iframe举例
        ,title: '编辑产品'
        ,area: ['700px', '700px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          0,0
        ] 
        ,content: 'bianjixinxi.html?id ='+data.id+"&name="+data.name+"&sex="+data.sex+"&birthday="+data.birthday+"&age="+data.age+"&city="+data.city+"&tupian="+data.tupian
        ,btn: [ '全部关闭'] //只是为了演示
        ,btn2: function(){
          layer.closeAll();
        }
        
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
	    
	    
	    layer.msg('编辑信息');
	    //同步更新缓存对应的值
	    obj.update({
	      username: '123'
	      ,title: 'xxx'
	    });
	  } 
	});
  //监听头部事件
  table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
});
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit" href="bianjixinxi.html">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>